/**@author :namtq
** @desc: slideshow site anh*/
var sh_fullscreen = {
    params:{
        title:'',
        lead:'',
        width:'',
        height:'',
        masterial: '',
        started: 0,
        sharelink: ''
    },
    cssurl:'http://topofthetown.windsorplazahotel.com',
    articleid: 0,
    windowsize: {},
    framesize: {},
    current:0,
    imgarr:'',
    imgleng:0,
    expandstatus: 0,
    loadedslide:0,
    detectdevide: 0,
    createhtml:function () {
        $("body").append('<div id="popupslide" style="display:none;"></div>');
        $("#popupslide").append('<link href="' + this.cssurl + '/templates/protostar/css/slide_show_gal.css" media="screen" rel="stylesheet" type="text/css"/>');
        var $html = '<div id="slide_show_gal" class="fullscreen"><div class="icon_close"><a href="javascript:;"></a></div><div class="content_gal">'+
			'<div id="slide_gal" class="slide_gal sh_slide_left"><div id="galleria" class="galleria-container"></div><div class="showthumb"></div><div class="galleria-share-facebook"></div>' +
            '<div class="galleria-image-nav"><div class="galleria-image-nav-right">&nbsp;</div><div class="galleria-image-nav-left">&nbsp;</div></div>' +
            '</div><div class="clear"></div></div><div class="bg_opacity_slide" style="display:none;"></div><div class="clear"></div>' +
            '<div id="slide_thumbs" style=""><div id="close_thumbs"></div><div class="galleria-thumbnails-container galleria-carousel">'+
			'<div class="galleria-thumbnails-list slides_container"></div></div><div class="galleria-counter">Gallery (<span class="galleria-total">0</span>) </div></div>' +
            '<div class="footer_slideshow"><div class="footer_gal">' +	this.params.masterial + 
			'</div></div></div>';
        $("#popupslide").append($html);
        var script_2 = document.createElement("script");
        script_2.type = "text/javascript";
        script_2.src = this.cssurl + '/templates/protostar/js/gallery/jquery.touchSwipe.min.js';
        document.body.appendChild(script_2);
        var script_3 = document.createElement("script");
        script_3.type = "text/javascript";
        script_3.src = this.cssurl + '/templates/protostar/js/gallery/jquery.flexslider-min.js';
        document.body.appendChild(script_3);
        
    },
    run:function () {
        this.createhtml();
        this.getImage();
        var tempthis = this;
        if (this.params.masterial){
            $("#slide_show_gal").find(".footer_slideshow").show();
            $("#slide_show_gal").find(".content_gal").css("bottom",70)
        }
        else{$("#slide_show_gal").find(".footer_slideshow").hide();}
        $("#popupslide .icon_close, #popupslide .quaylai").click(function () {sh_fullscreen.close();});
        $("#popupslide .galleria-image-nav-left").bind("click", function () {sh_fullscreen.showPrev();});
        $("#popupslide .galleria-image-nav-right").bind("click", function () {sh_fullscreen.showNext();});
        $("#slide_show_gal").find(".showthumb").bind("click",function(){sh_fullscreen.showThumb();})
        $(window).resize(function() {sh_fullscreen.resizeBox();})
        $(".viewall a").click(function () {sh_fullscreen.showThumb();});
        $("#popupslide .sh_slide_left").mouseenter(function () {$("#popupslide .galleria-bar").show();});
        $("#popupslide").find(".galleria-share-facebook").bind("click",function(){sh_fullscreen.sharefacebook();});
        $(document).ready(function(){
            sh_fullscreen.resizeBox();
            if (sh_fullscreen.params.started > 0) {
                sh_fullscreen.showImage(sh_fullscreen.params.started - 1);
            }
        });
    },
    sharefacebook:function () {
        width = 500; height = 400;
        var objectid = parseInt(this.imgarr[this.current].attr("data-reference-id"));
		var sohinh = this.current+1;
        var leftPosition, topPosition;
        leftPosition = (this.windowsize.width / 2) - ((width / 2) + 10);
        topPosition = (this.windowsize.height / 2) - ((height / 2) + 50);
        var windowFeatures = "status=no,height=" + height + ",width=" + width + ",resizable=yes,left=" + leftPosition + ",top=" + topPosition + ",screenX=" + leftPosition + ",screenY=" + topPosition + ",toolbar=no,menubar=no,scrollbars=no,location=no,directories=no";
        u= location.href 
        if (this.params.sharelink) {
            u = this.params.sharelink + '/' + this.articleid + '/refer/' + objectid;
        }
        else {
            u = this.cssurl+ '/images/banners/' + sohinh + '.jpg' ;
        }
        t=document.title;
        window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer', windowFeatures);
        return false;
    },
    getImage:function(){
        var mypic = new Array();
        var mysize = new Array();
        var i = 0;
        var caption = '';
        var name = 'tt_article_id';
        var b = document.getElementsByTagName("meta");
        if (b.length > 0) for (var c = 0; c < b.length; c++) if (b[c].getAttribute("name") != null && b[c].getAttribute("name").toLowerCase() == name.toLowerCase()) var articleid =  b[c].getAttribute("content");
        this.articleid = articleid;
        var $thumhtml = '<div class="galleria-thumb-item"><div id="galleria-thumb-jcarousellite">';
        var css_path = this.cssurl;
        var length_img = $("#article_content img").length;
        var thumbreset = 0;
        $thumhtml += '<ul class="slides">';
        $("#article_content img").each(function (index) {
            $thumhtml += '<li class="galleria-image galleria-image-' + index + '" onClick="sh_fullscreen.activeImg(this)"><img rel="' + index + '" src="' + $(this).attr("src") + '"></li>';
            $(this).attr("id", "vne_slide_image_" + index);
            mypic[index] = $(this).clone();
            $(this).css("cursor", 'url(' + css_path + '/images/background/zoom_cursor.png),auto');
            $(this).on("click", function () {
                sh_fullscreen.open(index);
            });
            $(this).parent().find(".btn_icon_show_slide_show").on("click",function(){
                sh_fullscreen.open(index);
            })
            i++;
        });
        $thumhtml += '</ul>';
        $thumhtml += '</div>';
        $thumhtml += '<div class="galleria-thumb-nav-left"></div><div class="galleria-thumb-nav-right"></div></div>';
        $("#popupslide .galleria-thumbnails-list").append($thumhtml);
        this.imgleng = i - 1;
        this.imgarr = mypic;
    },
    close:function(){
        $("html").css({'overflow-x': 'auto','overflow-y' : 'auto'})
        $("#popupslide").hide();
        this.hideThumb();
        $(document).off('keydown');
    },
    activeImg:function (obj) {
        $('.galleria-image').removeClass('active');
        $(obj).addClass('active');
    },
    open: function(index, type){
        $(document).keydown(function(event){
            if (event.keyCode == 39){
                sh_fullscreen.showNext();
            }
            if (event.keyCode == 37){
                sh_fullscreen.showPrev();
            }
            if (event.keyCode == 27){
                sh_fullscreen.close();
            }
        });
        this.showImage(index, type);
    },
    showImage:function (index, type) {
        var self = this;
        $("html").css({'overflow-x': 'hidden','overflow-y' : 'hidden'});
        $("#popupslide").prepend('<div class="galleria_loading"><img src="'+this.cssurl+'/images/background/classic-loader.gif" alt="Loading"></div>');
        this.current = parseInt(index);
        var image = this.imgarr[index];
        var $src = image.attr("src");
        $src = $src.replace("_300.", "_800.");
        $("#galleria").html('<img id="loader_img" style="max-width: 100%; max-height: 100%; display: none;" src="http://wmcvietnam.com/images/loading.gif" />'+'<img style="max-width: 100%; max-height: 100%; display: none;" src="' + $src.replace("_resize","") + '" />');

        // show loading image
        $('#loader_img').show();

        // main image loaded ?
        $('#galleria img').on('load', function(){
          // hide/remove the loading image
          $('#loader_img').hide();
        });
        $("#galleria-info").remove();
        var textinfo = image.attr("data-component-caption");
        textinfo = this.htmldecode(textinfo);
        var TextInfoLength = textinfo.length;
        if (TextInfoLength >= 3){
            $("#galleria").append('<div id="galleria-info" data-show="1" class="galleria-info"><div class="galleria-info-text"><div class="galleria-info-description"><div class="text-too-lenght show_description_all"><span class="galleria-count-image-thumb">' + (this.current + 1) +'/' + (this.imgleng + 1) + '  |  </span>' + textinfo + '</div></div></div></div>');
            var fori = 1;
            var appint = setInterval(function(){
                var devheight = $(".text-too-lenght").height();
                if (devheight > 0 || fori > 5) {
                    if (devheight > 60){
                        $(".galleria-info-description").append('<div class="too-length-dot"> ...</div>');
                        if (self.expandstatus == 0) {
                            $("#galleria-info").prepend('<div class="view-more-too-lenght" onclick="sh_fullscreen.showviewmore();">&nbsp;</div>');
                            self.showviewmore();
                        }
                        else {
                            $("#galleria-info").prepend('<div class="view-more-too-lenght show_icon_all" onclick="sh_fullscreen.showviewmore();">&nbsp;</div>');
                            $(".too-length-dot").hide();
                        }
                    }
                    clearInterval(appint)
                }
                fori ++;
            }, 100);
        }
        $("#popupslide").show();
        $("#galleria").find("img").load(function(){
            var hBoxLeft = sh_fullscreen.framesize.height;
            hheight = $(this).height();
            marTop = hBoxLeft/2 - hheight/2;
            if (marTop < 0) {marTop = 0}
            $(".galleria_loading").remove();
            $(this).css("margin-top", marTop+'px').fadeIn(500);
        });
        if (this.detectdevide == 0){
            this.isTouchEnabled();
		
        }
        if (this.current == 0) {
            $('.galleria-image-nav-left').hide(); 
        }
        else {
            $('.galleria-image-nav-left').show(); 
        }
        if (this.current == this.imgleng){
            $('.galleria-image-nav-right').hide();
        }
        else {
            $('.galleria-image-nav-right').show();
        }
    },
    isTouchEnabled: function() {
        //var result = document.createEvent("");
		var result = !!document.createTouch;
        if (result) {
            jQuery(function() {
              jQuery("#galleria").swipe( {
                swipe:function(event, direction, distance, duration, fingerCount) {
                  if (direction == 'left') {
                    sh_fullscreen.showNext(); 
                  }
                  if (direction == 'right') {
                    sh_fullscreen.showPrev();
                  } 
                },
				fingers:'all',
                tap:function(event, target) {
                    jQuery(target).trigger('click');
                }
              });
            });
        }
		
        //this.detectdevide = 1;
    },
    showviewmore: function(){
        var status = parseInt($("#galleria-info").attr("data-show"));
        if (status == 0) {
            $("#galleria-info").find(".text-too-lenght").addClass('show_description_all');
            $("#galleria-info").find(".view-more-too-lenght").addClass('show_icon_all');
            $("#galleria-info").find(".too-length-dot").hide();
            $("#galleria-info").find(".galleria-count-image-thumb").hide();
            $("#galleria-info").attr("data-show",1);
            this.expandstatus = 1;
        }
        else {
            $("#galleria-info").find(".text-too-lenght").removeClass('show_description_all');
            $("#galleria-info").find(".view-more-too-lenght").removeClass('show_icon_all');
            $("#galleria-info").attr("data-show",0);
            $("#galleria-info").find(".too-length-dot").show();
            $("#galleria-info").find(".galleria-count-image-thumb").show();
            this.expandstatus = 0;
        } 
    },
    showNext:function () {
        var length_img = $("#article_content img").length;
        if (this.current < this.imgleng) {
            this.showImage(parseInt(this.current) + 1);
        }
        return true;
    },
    showPrev:function () {
        var length_img = $("#article_content img").length;
        if (this.current == 0) {}
        else {
            this.showImage(parseInt(this.current) - 1);
        }
    },
    hideThumb:function () {
        $('#slide_thumbs').animate({
            bottom:'-250px'
        }, 500).hide();
        $('.footer_gal li.viewall a').removeClass('hideslideshow');
        $('.footer_gal li.viewall a').text('Xem tất cả');
        $('#thumb-more').css('background-position', 'right top 0px');
        $('.bg_opacity_slide').hide();
        $( "#galleria-thumb-jcarousellite" ).find("li").removeAttr("style");
    },
    showThumb:function () {
		$(".galleria-thumb-nav-right").bind("click", function () {
			slider.showNext();
		});
		$(".galleria-thumb-nav-left").bind("click", function () {
			slider.showPrev();
		});
		$("#popupslide .galleria-total").text(this.imgleng + 1);
		$("#popupslide .galleria-image").find("img").bind("click", function () {
			sh_fullscreen.showImage($(this).attr("rel"));
			sh_fullscreen.hideThumb();
			$('.bg_opacity_slide').hide();
		});
		$("#close_thumbs").bind("click", function () {sh_fullscreen.hideThumb();});
        $('#slide_thumbs').css('bottom', '-250px');
        $("#slide_thumbs").show();
        var bottomspace = (this.params.masterial) ? 70 : 20;
        $('#slide_thumbs').animate({
            bottom: bottomspace
        }, 500);
        $('.bg_opacity_slide').show();
        $("#galleria-thumb-jcarousellite").find(".galleria-image").removeClass("active");
        $("#galleria-thumb-jcarousellite").find(".galleria-image-" + this.current).addClass("active");
    },
    resizeBox : function(){
        var documentWidth = $(window).width();
        var documentHeight = $(window).height();
        var framewidth = documentWidth - 80;
        var frameheight = (this.params.masterial) ? (documentHeight - 100) : (documentHeight - 60);
        this.windowsize = {"width" : documentWidth, "height" : documentHeight};
        this.framesize = {"width" : framewidth, "height" : frameheight};
        this.calculator();
    },
    calculator: function(){
        $("#popupslide").find(".galleria-image-nav").css("top", (this.framesize.height - 50) / 2);  
        $("#galleria").height(this.framesize.height); 
    },
    htmldecode: function(str) {
        return $('<div/>').html(str).text();
    },
    replacetext: function(str){
        return (str + '')
		.replace(/\\(.?)/g, function(s, n1) {
			switch (n1) {
				case '\\':return '\\';
				case '0':return '\u0000';
				case '':return '';
				default:return n1;
			}
		});
    }    
}